<!-- author: xuett -->
<!-- date: 2025-03-13 13:36:00 -->
<!-- description: 专业申请表 -->
<template>
  <div class="apply-container">
    <!-- 左侧内容编辑 -->
    <div v-loading="loading" class="left-content">
      <!-- 头部 -->
      <headerBox @updateList="updateList"></headerBox>
      <!-- 富文本编辑内容 -->
      <div class="content-box">
        <!-- 富文本编辑器 -->
        <div class="left-editor">
          <vue3-tinymce v-model="testContent" :setting="setting" @init="editorInit" />
        </div>
        <!-- 目录 -->
        <div class="right-list">
          <div class="list-header"></div>
          <div class="list-title">目录大纲</div>
          <div class="list-box">
            <div class="first-block" v-for="first in directoryList" :key="first.id">
              <div
                :class="['first-title', first.id == activeDirectory.id || first.id == activeDirectory.parentId ? 'active-first-title' : '']"
                @click="jumpToContent(first)"
              >
                <div class="frist-title-text" :title="first.title">{{ first.title }}</div>
                <GsvgIcon v-if="first.complete" class="success-icon" icon="complete"></GsvgIcon>
              </div>
              <div
                :class="['second-title', second.id == activeDirectory.id ? 'active-second-title' : '']"
                v-for="second in first.child"
                :key="second.id"
                @click="jumpToContent(second)"
              >
                <div class="second-title-text" :title="second.title">{{ second.title }}</div>
                <GsvgIcon v-if="second.complete" class="success-icon" icon="complete"></GsvgIcon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="apply-footer">
        <div class="footer-left">
          <el-button link @click="openEducationDoc"><GsvgIcon class="footer-icon" icon="educationDoc"></GsvgIcon>保存</el-button>
          <el-button link @click="startCheck"> <GsvgIcon class="footer-icon" icon="check"></GsvgIcon>输出</el-button>
        </div>
        <div class="footer-right">
          <el-button type="primary" @click="openExportDialog">导出</el-button>
        </div>
      </div>
    </div>
    <!-- 右侧智能助手 -->
    <rightHelper ref="rightHelperRef" @fillContent="fillContent"></rightHelper>
    <!-- 教育部文档弹窗 -->
    <educationDoc ref="educationDocRef"></educationDoc>
    <!-- 页面校验 -->
    <checkDialog ref="checkDialogRef"></checkDialog>
    <!-- 导出类型选择弹窗 -->
    <exportDialog ref="exportDialogRef"></exportDialog>
  </div>
</template>

<script setup>
import Vue3Tinymce from "@jsdawn/vue3-tinymce";
import textContent from "./word";
import api from "@/service/container";
import headerBox from "./header.vue";
import rightHelper from "./right-helper.vue";
import educationDoc from "./components/educationDoc.vue";
import checkDialog from "./components/check-dialog.vue";
import exportDialog from "./components/export-dialog.vue";

const rightHelperRef = ref();
const state = reactive({
  loading: true,
  testContent: "",
  // editor 配置项
  setting: {
    height: "100%",
    menubar: false, //隐藏菜单栏
    //工具栏控件配置
    //  | numlist bullist table | image media | link unlink | indent outdent | superscript subscript
    toolbar:
      "undo redo removeformat | fontfamily fontsize lineheight | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify |",
    toolbar_mode: "sliding", //工具栏模式
    quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsize forecolor backcolor",
    //插件配置  link image media table lists fullscreen
    plugins: "image table quickbars",
    noneditable_editable_class: "mceNonEditable", //设置不可编辑元素的类名
    statusbar: false, //编辑器底部状态栏，隐藏
    // 按 WPS 常见字体配置字体类型
    font_family_formats:
      "宋体=simsun;黑体=simhei;楷体=kaiti_gb2312;仿宋=fangsong;微软雅黑=Microsoft YaHei;方正小标宋简体=FangZhengXiaoBiaoSong;Arial=arial,helvetica,sans-serif;Times New Roman=times new roman,times",
    // 按 WPS 字号对应配置字体大小
    font_size_formats:
      "初号=42pt 小初=36pt 一号=26pt 小一=24pt 二号=22pt 小二=18pt 三号=16pt 小三=15pt 四号=14pt 小四=12pt 五号=10.5pt 小五=9pt 六号=7.5pt 小六=6.5pt 七号=5.5pt 八号=5pt",
    language: "zh_CN", //语言,汉化
    language_url: "/tinymce/langs/zh_CN.js", //public中下载的汉化文件
    content_css: "/mycontent.css"
  },
  directoryList: [],
  activeDirectory: {},
  templateObj: {}
});
const { loading, testContent, setting, directoryList, activeDirectory } = toRefs(state);

//顶部tab栏切换，更新目录
const updateList = (id) => {
  if (id != null) {
    api.getwordList({ schoolLevelId: id }).then((res) => {
      if (Array.isArray(res.data) && res.data.length) {
        state.directoryList = res.data;
        jumpToContent(state.directoryList[0]);
      } else {
        state.directoryList = [];
        state.activeDirectory = {};
      }
    });
  } else {
    //无tab栏情况
  }
};

//富文本编辑器
const editorIns = shallowRef();
const editorInit = (editor) => {
  state.loading = false;
  //初始化完成，获取实例
  editorIns.value = editor;
  setContentToEditor();
};

const jumpToContent = (val) => {
  state.activeDirectory = val;
  if (Array.isArray(val.child) && val.child.length) {
    return;
  } else if (val.code) {
    // const iframeDoc = editorIns.value.getDoc();
    // const targetElement = iframeDoc.getElementById(val.code);
    // if (targetElement) {
    //   targetElement.scrollIntoView({
    //     behavior: "smooth",
    //     block: "start"
    //   });
    // } else {
    //   ElMessage.warning("未找到选择目录对应内容！");
    // }
    api.getRichTextByCatalog({ catalogId: val.id }).then((res) => {
      state.templateObj = res.data;
      rightHelperRef.value.getCueWord(res.data.id);
      setContentToEditor();
    });
  }
};

//设置编辑器内容
const setContentToEditor = () => {
  if (editorIns.value && state.templateObj.content) {
    // console.log(state.templateObj.content);

    // editorIns.value.setContent(state.templateObj.content);
    editorIns.value.setContent(textContent);
  }
};

//填充内容
const fillContent = (val) => {
  if (editorIns.value) {
    const iframeDoc = editorIns.value.getDoc();
    const targetElement = iframeDoc.getElementById(val.id);
    if (targetElement) {
      targetElement.innerHTML = val.value;
    } else {
      ElMessage.warning("未找到可填充字段！");
    }
  }
};

//教育部文档弹窗
const educationDocRef = ref(null);
const openEducationDoc = () => {
  ElMessageBox.confirm("是否确认保存当前模板？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      api
        .saveTemplate({
          afTemplateWordVOList: [],
          schoolLevelId: 4,
          catalogId: 22,
          // id: "1905466365553790977",
          content: encodeURIComponent(editorIns.value.getContent()),
          hasWord: false,
          hasMajor: false,
          useSchoolName: false,
          useMajorName: false,
          useMajorcode: false,
          useMajorCategory: false,
          useMajor: false,
          usePeriod: false
        })
        .then((res) => {
          ElMessage.success("保存成功");
        });
    })
    .catch(() => {});
};

//页面校验
const checkDialogRef = ref();
const startCheck = () => {
  console.log(editorIns.value.getContent());
};

//导出弹窗
const exportDialogRef = ref();
const openExportDialog = () => {
  exportDialogRef.value.show(editorIns.value.getContent());
};
</script>

<style scoped lang="scss">
.apply-container {
  width: 100%;
  height: 100%;
  display: flex;
  .left-content {
    width: calc(100% - 410px);
    height: 100%;
    background-color: #f1f3f5;
    overflow: hidden;
    .content-box {
      width: 100%;
      height: calc(100% - 112px);
      position: relative;
      display: flex;
      z-index: 1;
      .left-editor {
        width: calc(100% - 260px);
        height: 100%;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 47px;
          background-color: #fff;
          box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .right-list {
        width: 250px;
        height: 100%;
        margin-left: 10px;
        .list-header {
          width: calc(100% + 10px);
          height: 47px;
          background-color: #fff;
          box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
          margin-left: -10px;
        }
        .list-title {
          width: 100%;
          height: 22px;
          font-family: Alibaba PuHuiTi-Bold;
          font-weight: bold;
          font-size: 16px;
          color: #000000;
          line-height: 22px;
          margin: 30px 0;
          padding-left: 20px;
        }
        .list-box {
          width: 100%;
          height: calc(100% - 130px);
          padding: 0 14px 20px 0;
          border-left: 1px solid #e7e7e7;
          overflow-x: visible;
          overflow-y: auto;
          .first-block {
            width: 100%;
            font-family: Alibaba PuHuiTi-Regular;
            color: #333333;
            line-height: 30px;
            .first-title {
              width: 100%;
              height: 30px;
              padding: 0 0 0 20px;
              margin-bottom: 10px;
              border-left: 1px solid #e7e7e7;
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative;
              z-index: 10;
              cursor: pointer;
              &:hover {
                color: #0057ff;
                border-left: 1px solid #0057ff;
              }
              .frist-title-text {
                width: calc(100% - 46px);
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .second-title {
              width: 100%;
              height: 30px;
              padding: 0 0 0 40px;
              margin-bottom: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              cursor: pointer;
              &:last-child {
                margin-bottom: 0;
              }
              &:hover {
                color: #0057ff;
              }
              .second-title-text {
                width: calc(100% - 46px);
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .active-first-title {
              color: #0057ff;
              border-left: 1px solid #0057ff;
            }
            .active-second-title {
              color: #0057ff;
            }
          }
        }
      }
    }
    .apply-footer {
      width: 100%;
      height: 56px;
      padding: 0 20px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 2;
      .footer-left {
        .el-button {
          font-family: Alibaba PuHuiTi-Regular;
          font-size: 14px;
          color: #000000;
          &:nth-child(1) {
            margin-right: 40px;
          }
        }
        .footer-icon {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }
      .footer-right {
        .el-button {
          width: 150px;
          height: 40px;
          font-size: 16px;
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
